<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>所有题目</title>

    <!-- 引入vue -->
    <script src="../plugins/vue/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引用element-ui -->
    <link rel="stylesheet" href="../plugins/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../plugins/element-ui/index.js" charset="utf-8"></script>
    <!-- 引用axios -->
    <script src="../plugins/axios/axios.min.js" charset="utf-8"></script>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }

        #sys{
            float: left;
        }
        #quit{
            float: right;
        }
    </style>
</head>


<body>
<div id="app">

    <el-container style="height: 1000px; border: 1px solid #eee">
        <el-container>
            <!-- <el-header style="text-align: left; font-size: 12px"> -->
            <el-header>
                <span style="margin-left: 25px; font-size: 25px;">题目管理</span>
                <el-dropdown>
                    <!-- <i class="el-icon-setting" style="margin-right: 15px"></i> -->
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- <span style="text-align: right;">王小虎</span> -->
            </el-header>

            <el-main>
                <el-table
                        :data="timu.slice((currentPage - 1) * pageSize, currentPage*pageSize)"
                        style="width: 100%">
                    <el-table-column
                            label="题目编号"
                            width="300"
                            prop = "id">
                    </el-table-column>
                    <el-table-column
                            label="题目类型"
                            width="180"
                            prop = "type">
                    </el-table-column>
                    <el-table-column
                            label="题目描述"
                            width="1100"
                            prop = "description">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-main>
        </el-container>
    </el-container>

    <el-dialog
            title="编辑题目"
            :visible.sync="isEditing"
            width="50%"
            :before-close="handleClose">
        <el-form ref="form" :model="currentInfo" label-width="80px">
            <el-form-item label="题目ID">
                <el-input v-model="this.id" disabled = true ></el-input>
            </el-form-item>
            <el-form-item label="题目类型">
                <el-select v-model="currentInfo.type" placeholder="请选择题目类型" >
                    <el-option label="单选题" value="单选题"></el-option>
                    <el-option label="多选题" value="多选题"></el-option>
                    <el-option label="填空题" value="填空题"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目描述">
                <el-input placeholder="请输入题目内容描述" v-model="currentInfo.description" ></el-input>
            </el-form-item>
            <el-form-item label="修改时间">
                <el-input v-model="currentInfo.update_time" disabled = true></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="isEditing = false">取 消</el-button>
                <el-button type="primary" @click="handleEditSubmit()">确定修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            timu:[],
            id:'',
            description:"",
            type: "",
            update_time:"",
            currentPage: 1,
            total:0,
            pageSize: 5,
            loading: true,
            isEditing: false,
            currentInfo: {
                type: '',
                description: '',
                update_time:'',
            }
        },
        // mounted() {
        // 	axios.get("http://106.13.210.60:3306/noQuestionDB/question").then(res=>{
        // 		this.timu = res.data;
        // 	})
        // }
        created(){
            this.getAll();
        },
        methods:{
            getAll(){
                axios.get("http://localhost:8080/questions").then((res)=>{
                    this.timu = res.data;
                    this.total = res.data.length
                })
            },
            handleEdit(index, row) {
                // console.log(index, row);
                // alert(row.id);
                this.isEditing = true
                this.id = row.id
                this.currentInfo.update_time = Date()
            },
            handleSizeChange(newSize){
                this.currentPage = Math.trunc(((this.currentPage-1) * this.pageSize+1) / newSize)+1
                this.pageSize = newSize
                this.getAll()
            },
            handleCurrentChange(currentPage){
                this.currentPage = currentPage
                this.getAll()
            },
            handleDelete(index, row) {
                // console.log(index, row);
                // alert("这是删除");
                // let fd = new FormData()
                // fd.append("id",row.id);
                //
                // axios.delete("http://localhost:8080/questions/" + row.id).then(res=>{
                //     this.$message({
                //         message: '删除成功！',
                //         type: 'success'
                //     });
                // })
                axios({
                    method:'delete',
                    url:'http://localhost:8080/questions',
                    params:{id:row.id},
                    data:{id:row.id}
                }).then(res=>{
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                })

                // axios.post("http://localhost:8080/questions/" + row.id,fd).then(res=>{
                //     location.reload();
                //     this.$message({
                //
                //         message: '删除成功！',
                //         type: 'success'
                //     });
                // })
            }
        }
    })
</script>
</body>
</html>